<script setup>
  const props = defineProps({
    data: Object,
  })
</script>

<template>
  <div class="info-card flex-col">
    <h1 class="title">
      <div>
        <span>{{ props.data.title[0] }}</span>
        <span>{{ props.data.title[1] }}</span>
      </div>
      <div>
        <slot></slot>
      </div>
    </h1>
    <div v-for="(row, index) in props.data.content" class="row">
      <div v-for="col in row" :key="index" class="col">
        <span class="label">{{ col[0] ?? '-' }}</span>
        <span class="value">{{ col[1] ?? '-' }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .info-card {
    padding: var(--padding-3) 64px;
    border-radius: var(--round-2);
    background-color: #fff;
    transition: all 0.3s ease-in-out;

    .title {
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .row {
      display: flex;
      align-items: center;
      gap: var(--padding-3);
      margin-top: var(--padding-2);
    }

    .col {
      display: flex;
      align-items: center;
      gap: var(--padding-2);
      font-size: 20px;
      font-weight: 700;
      padding-left: var(--padding-3);
      border-left: 2px dotted var(--neutral-500);

      &:first-child {
        padding-left: 0;
        border-left: 0;
      }
    }

    .label {
      color: var(--neutral-500);
    }

    .value {
      color: var(--neutral-900);
    }
  }
</style>
